<template>
    <div>
        <van-row>
          <van-col span="24" >
              <van-cell :border="false" @click="toList" is-link center>
                <template #title>
                  <div class="faceClass">
                    <van-image
                        round
                        width="3rem"
                        height="3rem"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <p>
                      <span class="custom-user">{{ username }}</span>
                      <br>
                      <span class="custom-title">
                        {{userDesc}}
                      </span>
                    </p>
                  </div>
                </template>
              </van-cell>
          </van-col>

          <van-col span="24" style="margin-top: .5rem;">
              <van-cell>
                <span style="font-weight: bolder; font-size: 1.2em;">常用功能</span>
                <van-grid :clickable="true" :border="false" :column-num="4"  >
                  <van-grid-item  :to="item.url" v-for="(item,index) in gridList " :key="index">
                    <icon-svg  size="1.8" :icon-class="item.icon"></icon-svg>
                    <p style="font-size: 1em;  padding-top: 10px;">{{item.title}}</p>
                  </van-grid-item>
                </van-grid>
              </van-cell>
          </van-col>


          <van-col span="24" style="margin-top: .5rem;">
              <van-cell>
                <span style="font-weight: bolder;font-size: 1.2em;">推荐工具</span>
                <van-grid :clickable="true"   :border="false" :column-num="4"  >
                  <van-grid-item :to="item.url"  v-for="(item,index) in toolList " :key="index">
                    <icon-svg size="1.8"  :icon-class="item.icon"></icon-svg>
                    <p style=" font-size: 1em;  padding-top: .5em;">{{item.title}}</p>
                  </van-grid-item>
                </van-grid>
              </van-cell>
          </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
  name: "Info",
  data(){
    return{
      username:'Herther',
      userDesc:'填满了肚子，人才不会空虚寂寞',
      gridList:[
        {title:"订单管理",icon:"my-icon-wodedingdan",url:"/Order"},
        {title:"评价中心",icon:"my-icon-pingjia1",url:"/Evaluate"},
        {title:"个人信息",icon:"my-icon-zhanghaoguanli",url:"/InfoList"},
        {title:"设置中心",icon:"my-icon-guanlishezhi",url:"/Setting"},
      ],
      toolList:[
        {title:"收货地址",icon:"my-icon-shouhuodizhi",url:"/Address"},
        {title:"生鲜超市",icon:"my-icon-shengxianshuiguo",url:""},
        {title:"吃喝玩乐",icon:"my-icon-chihewanle",url:""},
        {title:"帮助中心",icon:"my-icon-bangzhu",url:""},
        {title:"商务合作",icon:"my-icon-hezuo",url:""},
        {title:"联系客服",icon:"my-icon-qunti",url:""},
        {title:"签到领现金",icon:"my-icon-jifenduihuan",url:""},
        {title:"会员权益",icon:"my-icon-huiyuanquanyi",url:""},
        {title:"发现",icon:"my-icon-faxian",url:""},
        {title:"团购",icon:"my-icon-tuangou",url:""},
        {title:"发票助手",icon:"my-icon-kuaixun",url:""},
        {title:"更多",icon:"my-icon-gengduo",url:""},
      ],
    }
  },
  methods:{
    toList(){
      this.$router.replace("/InfoList")
    }
  }
}
</script>

<style scoped>
.faceClass{
  width: 100%; height: 5rem; display: flex; align-items: center;
}
.custom-user{
  padding-left: 10px; font-size: 1.2em;  font-weight: bolder;
}
.custom-title{
  padding-left: 10px; color: rgba(128,128,128,0.8); font-size: 1em;
}
/*.svg-icon >>> .iconSize{*/
/*  font-size: 3em;*/
/*}*/
</style>
